<template>
  <el-dialog title="培训计划详情" width="600px" :before-close="handleClose">
    <el-form :model="planDetails" label-width="120px">
      <el-form-item label="计划名称:">
        <el-input v-model="planDetails.name" readonly></el-input>
      </el-form-item>
      <el-form-item label="计划类型:">
        <el-input v-model="planDetails.type" readonly></el-input>
      </el-form-item>
      <el-form-item label="开始日期:">
        <el-input v-model="planDetails.startDate" readonly></el-input>
      </el-form-item>
      <el-form-item label="结束日期:">
        <el-input v-model="planDetails.endDate" readonly></el-input>
      </el-form-item>
      <el-form-item label="计划描述:">
        <el-input
          type="textarea"
          v-model="planDetails.description"
          readonly
          :rows="3"
        ></el-input>
      </el-form-item>
      <el-form-item label="关联课程:">
        <el-tag
          v-for="course in planDetails.courses"
          :key="course"
          style="margin-right: 5px"
          >{{ course }}
        </el-tag>
      </el-form-item>
      <el-form-item label="关联考核:">
        <el-tag
          v-for="assessment in planDetails.assessments"
          :key="assessment"
          style="margin-right: 5px"
          >{{ assessment }}
        </el-tag>
      </el-form-item>
      <el-form-item label="参与人员:">
        <el-tag
          v-for="participant in planDetails.participants"
          :key="participant"
          style="margin-right: 5px"
        >
          {{ participant }}
        </el-tag>
      </el-form-item>
      <el-form-item label="完成率:">
        <el-progress :percentage="planDetails.completionRate"></el-progress>
      </el-form-item>
      <el-form-item label="状态:">
        <el-tag :type="getStatusTag(planDetails.status)"
          >{{ planDetails.status }}
        </el-tag>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from "vue";

const dialogVisible = ref(false);
const planDetails = reactive({
  name: "新员工入职培训计划",
  type: "入职培训",
  startDate: "2023-09-01",
  endDate: "2023-09-30",
  description: "本计划旨在帮助新入职员工快速熟悉公司文化、规章制度和岗位职责。",
  courses: ["公司概况", "企业文化", "规章制度", "岗位职责"],
  assessments: ["入职考核"],
  participants: ["新入职员工"],
  completionRate: 80,
  status: "进行中",
});

const open = (data) => {
  if (data) {
    Object.assign(planDetails, data);
  }
  dialogVisible.value = true;
};

const handleClose = () => {
  dialogVisible.value = false;
};

const getStatusTag = (status) => {
  switch (status) {
    case "进行中":
      return "primary";
    case "已完成":
      return "success";
    case "已归档":
      return "info";
    case "草稿":
      return "info";
    default:
      return "";
  }
};

defineExpose({
  open,
});
</script>

<style scoped></style>
